<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
	#imgPreview {
	 width: 100px;
	 height: 100px;
	 margin: 10px auto 0px auto;
	 border: 1px solid black;
	 text-align: left;
	}
	#prompt3 {
	 width: 100%;
	 height: 100px;
	 text-align: left;
	 position: relative;
	}
	#imgSpan {
	 position: absolute;
	 top: 40px;
	 left: 20px;
	}
	.filepath {
	 width: 100px;
	 height: 100px;
	 opacity: 0;
	}
	#img3 {
	 height: 100%;
	 width: 100%;
	 display: none;
	}
</style>
<jsp:include page="header1.jsp"></jsp:include>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>  
<script type="text/javascript">
	 var xhr
	function check(){
		//1.创建XMLHttpRequest(xhr)对象
		try{
			xhr = new XMLHttpRequest();
		}catch(e){
			xhr = new ActiveXobject("Microsoft.XMLHTTP"); 
		}
 		//2.设置状态改变回调函数
 		xhr.onreadystatechange = mun;
 		var nickname = document.getElementById("nickname");
		//3.设置请求方式和路径
		xhr.open("Get","UserCheckServlet?ucs="+nickname.value)
		//4.发送请求
		xhr.send();
	}
	//5.处理响应内容
	function mun(){
		//完成响应
		if(xhr.readyState == 4){
			//成功响应
			if(xhr.status == 200){
				var resText = xhr.responseText;
				var msg = document.getElementById("msg");
				if(resText == "T"){
					msg.style.color="green";
					msg.innerHTML = "账号可以使用";
				}else{
					msg.style.color="red";
					msg.innerHTML ="账号已经存在 ";
				}
			}
		}
	}  
	function changepic() {
		 $("#prompt3").css("display", "none");
		 var reads = new FileReader();
		 f = document.getElementById('file').files[0];
		 reads.readAsDataURL(f);
		 reads.onload = function(e) {
		 document.getElementById('img3').src = this.result;
		 $("#img3").css("display", "block");
		 };
		}
</script>  
<style type="text/css">
	#reg{
		font-size:22px;
	}
</style>
</head>
<body>
		<!--shortcut end-->
<div class="w clearfix">
	<div class="logo fl">
		<img class="img" src="images/logo.png" alt="">
	</div>
	<div class="fl">
		<h3 class="login-text"> 欢迎注册</h3>
	</div>
</div>
<!--logo end-->

<!-- 引导到登陆 -->
<div class="reg-nav">
	<div class="w1190">
		<p>个人用户企业用户，我已经注册 马上 <a href="login.jsp">登录</a>></p>
	</div>
</div>
<div class="reg-nav">
	<div id="reg">
		<a href="register.jsp" >采购商注册</a>
		<a href="registers.jsp">供应商注册</a>
	</div>
</div>
<form action="register" method="post" enctype="multipart/form-data"> 
<div class="reg-form">
	<h3>采购商注册</h3>
	<div class="reg-form-xi">
		<div class="reg-item">
			<span class="label">用户名：</span>
			<div class="fl">
				<input class="itext" id="nickname" name="nickname" onblur="check()"/>
				<p><span id="msg"></span></p>
			</div>
		</div>
		<div class="reg-item">
			<span class="label">请设置密码：</span>
			<div class="fl">
				<input type="password" class="itext" name="upwd"/>
			</div>
		</div>
		<div class="reg-item">
			<span class="label">请确认密码：</span>
			<div class="fl">
				<input type="password" class="itext" />
			</div>
		</div>
	</div>
	<h3>企业信息</h3>
		<div class="reg-form-xi">
			<div class="reg-item">
				<span class="label">企业名称：</span>
				<div class="fl">
					<input type="text" class="itext" name="aname"/>
				</div>
			</div>
			<div class="reg-item">
				<span class="label">企业服务：</span>
				<div class="fl">
					<textarea class="textA" value="" name="serve"></textarea>
				</div>
			</div>
			
			
			<div>
				<div id="imgPreview">
				 	<div id="prompt3">
					 	<span id="imgSpan">
						 	击上传头像
						   	<br />
						 	<i class="aui-iconfont aui-icon-plus"></i>
						 </span>
					 	<input type="file" id="file" name="pic" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
				 	</div>
				 	<img src="#" id="img3" />
				</div>
			</div>
			
			<div class="reg-item">
				<span class="label">企业服务：</span>
				<div class="fl">
					<div class="reg-file">
						<input type="file" class="ifile" name="firmservice"/>
						<div class="false-file">添加图片</div>
					</div>
					<span class="zhic">仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M</span>
				</div>
			</div>
			<div class="reg-item">
				<span class="label">GSP认证：</span>
				<div class="fl">
					<div class="reg-file">
						<input type="file" class="ifile" name="gsp"/>
						<div class="false-file">添加图片</div>
					</div>
				</div>
			</div> 
			<div class="reg-item">
				<span class="label">联系人：</span>
				<div class="fl">
					<input type="text" class="itext" name="linkman"/>
				</div>
			</div>
			<div class="reg-item">
				<span class="label">验证手机：</span>
				<div class="fl">
					<input type="text" class="itext" name="phone"/>
				</div>
			</div>
			<div class="reg-item">
				<span class="label">短信验证码：</span>
				<div class="fl">
					<input type="text" class="itext" />
				</div>
				<div class="fl"><a class="verify" href="#">获取短信验证码</a>
				</div>
			</div>
			<div class="reg-item">
				<span class="label">邮箱：</span>
				<div class="fl">
					<input type="text" class="itext" name="email"/>
				</div>
				<div class="tixing">
					<p>用来接收订单提醒邮件，便于您及时了解订单状况</p>
				</div>
			</div>
		<div class="reg-item">
			<span class="label">详细地址：</span>
			<div class="fl">
				<input type="text" class="itext address-xx" name="address"/>
			</div>
		</div>
		<div class="reg-item">
			<span class="label">拥有人：</span>
			<div class="fl">
				<input type="text" class="itext" name="owner"/>
			</div>
		</div>
		<div class="reg-item">
			<span class="label"></span>
			<div class="fl">
				<div class="reg-btn">
					<!--<a href="#">立即注册</a>-->
					<button class="reg-button reg-selected" value="立即注册">同意以下条款并注册</button>

				</div>
			</div>
		</div>
	</div>
</div>
</form>
</body>
</html>